<template>
  <div class="search">
    <el-form :inline="true" :model="searchData" class="demo-form-inline">
      <el-form-item>
        <el-input
          v-model="searchData.id"
          placeholder="请输入要查询的任务编号"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="newHandle"
      ><el-icon><Plus /></el-icon>新建</el-button
    >
  </div>
  <el-table
    :data="tableData"
    :key="tamptime"
    style="width: 100%"
    :border="true"
  >
    <el-table-column prop="id" label="任务编号" />
    <!-- <el-table-column
        type="index"
        :index="indexMethod"
        label="编号"
        width="60"
      /> -->
    <el-table-column prop="sumo_name" label="任务名称" />
    <el-table-column prop="taskStatus" label="任务状态">
      <template #default="scope">
        <div
          style="display: flex; align-items: center"
          v-if="scope.row.sumo_state == 'true'"
        >
          <span class="dot-icon" style="background-color: greenyellow"></span>
          未失效
        </div>
        <div
          style="display: flex; align-items: center"
          v-if="scope.row.sumo_state == 'false'"
        >
          <span class="dot-icon" style="background-color: red"></span>已失效
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="sumo_detector" label="检测器文件" />
    <el-table-column prop="sumo_time" label="创建时间" />
    <el-table-column fixed="right" label="操作" width="250">
      <template #default="scope">
        <el-button type="success" size="small" @click="handleGUI(scope.row)"
          >GUI</el-button
        >
        <el-button type="primary" size="small" @click="handleUpdate(scope.row)"
          >修改</el-button
        >
        <el-button type="danger" size="small" @click="handleDelete(scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
  <Dialog
    usePage="checkManage"
    ref="dialogRef"
    @getList="getVehicleTableData"
  ></Dialog>
</template>
  
  <script lang="ts" setup>
import Dialog from "@/pages/components/Dialog.vue";
import { onMounted, reactive, ref } from "vue";
import moment from "moment";
import { useRouter } from "vue-router";
import {
  getVehicleRealData,
  flowGUI,
  deleteVehicleData,
  queryVehicleRealData,
} from "@/api/sumo";

const router = useRouter();

const tamptime = ref(new Date().valueOf());
const searchData = reactive({
  id: "",
});
const dialogRef = ref();
const tableData = ref([]);
function onSearch() {
  queryVehicleRealData(parseInt(searchData.id), {}).then((res: any) => {
    tableData.value = res.results;
  });
}
getVehicleTableData();
function getVehicleTableData() {
  getVehicleRealData({}).then((res: any) => {
    console.log(res.results, tableData);
    tableData.value = res.results;
    searchData.id = "";
  });
}
// 新增
function newHandle() {
  dialogRef.value.getData({ modalTitle: "新增" });
}
// 修改
function handleUpdate(row: any) {
  row.modalTitle = "修改";
  dialogRef.value.getData(JSON.parse(JSON.stringify(row)));
}
function handleGUI(row: any) {
  flowGUI().then((res: any) => {
    if (res.status == "success") {
      getVehicleTableData();
    }
  });
}
// 删除
function handleDelete(row: any) {
  deleteVehicleData(row.id).then((res: any) => {
    if (res.status == "success") {
      getVehicleTableData();
    }
  });
}
// 查看
function handleView(row: any) {
  router.push({ path: `/commentManage`, query: {} });
}
</script>
  
  <style scoped lang="scss">
.search {
  display: flex;
  justify-content: space-between;
}
.dot-icon {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  text-align: center;
  margin-right: 5px;
}
</style>
  
